<template>
    <div class="view_service_agreement">
        <card :title="`${categoryName}分类服务协议`">
            <template #actions>
                <el-button type="primary" @click="add">新增协议</el-button>
            </template>
            <template #default>
                <el-table :data="tableData">
                    <el-table-column label="#" type="index" align="center" />
                    <!-- <el-table-column label="所属分类" prop="catalogId"></el-table-column> -->
                    <el-table-column label="标题" prop="title"></el-table-column>
                    <el-table-column label="描述" prop="description"></el-table-column>
                    <el-table-column label="内容" prop="content"></el-table-column>
                    <el-table-column label="创建时间" prop="createTime"></el-table-column>
                    <el-table-column label="修改时间" prop="updateTime"></el-table-column>
                    <el-table-column label="操作">
                        <template v-slot="{ row }">
                            <el-button type="text" @click="edit(row)">编辑</el-button>
                            <el-button type="text" @click="_delete(row.protocolId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </card>

        <!-- 添加/编辑协议对话框 -->
        <el-dialog :visible.sync="visible" :title="dialogTitle" @opened="handleOpened" @closed="handleClosed">
            <template v-slot:default>
                <el-form label-position="top">
                    <el-form-item label="标题">
                        <el-input v-model="formData.title" />
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="formData.description" type="textarea" :rows="3" resize="none" />
                    </el-form-item>
                    <el-form-item label="内容">
                        <editor v-model="formData.content" ref="editor" />
                    </el-form-item>
                </el-form>
            </template>
            <template v-slot:footer>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getDeletionOptions, getQueryOptions } from '../../mixins';
import editor from '../components/editor';

const defaultFormData = {
    title: '',
    description: '',
    content: '',
};

const defaultFormDataCopied = Object.assign({}, defaultFormData);

export default {
    data() {
        return {
            visible: false,
            tableData: [],

            formData: defaultFormData,

            editing: false,
        };
    },

    computed: {
        dialogTitle() {
            return this.editing ? '编辑协议' : '添加协议';
        },

        categoryId() {
            return +this.$route.query.categoryId;
        },

        categoryName() {
            return this.$route.query.categoryName;
        },
    },

    watch: { categoryId: 'query' },

    components: { editor },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/platform/findProtocol',
            params: {
                categoryId: 'catalogId',
            },
        }),

        getDeletionOptions({
            apiurl: '/yxl/platform/deleteProtocol',
            primaryKey: 'protocolId',
        }),
    ],

    methods: {
        // 处理对话框关闭
        handleClosed() {
            this.$refs.editor.clear();
            delete this.formData.protocolId;
            Object.assign(this.formData, defaultFormDataCopied);
        },

        // 处理对话框打开
        handleOpened() {
            this.$refs.editor.setValue(this.formData.content);
        },

        // 添加
        add() {
            this.editing = false;
            this.visible = true;
        },

        // 编辑
        edit({ protocolId, title, description, content }) {
            this.formData.protocolId = protocolId;
            this.formData.title = title;
            this.formData.description = description;
            this.formData.content = content;
            this.editing = true;
            this.visible = true;
        },

        // 保存
        save() {
            this.$put(
                `/yxl/platform/${this.editing ? 'update' : 'save'}Protocol`,
                Object.assign({ catalogId: this.categoryId }, this.formData)
            ).then(res => {
                this.visible = false;
                this.query();
            });
        },
    },
};
</script>